<template>
	<view class="page-content" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<view class="task-step" v-if="taskInfo">
			<view class="task-step_tips text-sm" v-if="taskInfo.surplus_num <= 0">
				<text class="text-danger">{{$t('work_order.surplus-num-tips')}}</text>
			</view>
			<view class="task-step_title">
				<text class="title">{{ taskInfo.title }}</text>
				<text class="text-xs text-auxiliary">{{ $util.handleStr($t('merchant-order-list.id-title'),taskInfo.id) }}</text>
			</view>
			<u-steps :current="current" activeColor="#36b368" class="number" dot>
				<u-steps-item :title="$t('work_order.step-item-1')" :desc="taskInfo.create_time"></u-steps-item>
				<u-steps-item :title="taskInfo.state_text" :error="currentError" :desc="taskInfo.update_time"></u-steps-item>
			</u-steps>
			<view class="task-step_btns flex-center">
				<view class="task-step__btn flex-center" v-if="taskInfo.state == 3" @click="clickOperateBtn(1)">
					<view class="btn-icon stop flex-center">
						<i-icon name="pause-line" color="#F57221" size="18px"></i-icon>
					</view>
					<text class="text-sm">{{$t('work_order.action-btn-1')}}</text>
				</view>
				<view class="task-step__btn flex-center" v-if="taskInfo.state == 4" @click="operationTask(1)">
					<view class="btn-icon start flex-center">
						<i-icon name="play-line" color="#36b368" size="18px" ></i-icon>
					</view>
					<text class="text-sm">{{$t('work_order.action-btn-2')}}</text>
				</view>
				<view class="task-step__btn flex-center"v-if="taskInfo.state == 3 || taskInfo.state == 4" @click="clickOperateBtn(2)">
					<view class="btn-icon end flex-center">
						<i-icon name="close-line" color="#ee5845" size="18px"></i-icon>
					</view>
					<text class="text-sm">{{$t('work_order.action-btn-3')}}</text>
				</view>
				<view class="task-step__btn flex-center" @click="$util.go('task/task_detail?id='+taskInfo.id)">
					<view class="btn-icon look flex-center">
						<i-icon name="eye-line" color="#2d8cf0" size="18px" @click="$util.go('task/task_detail?id='+taskInfo.id)"></i-icon>
					</view>
					<text class="text-sm">{{$t('work_order.action-btn-4')}}</text>
				</view>
			</view>
		</view>
		
		<view class="data-list conter" v-if="param.task_id">
			<view class="title-part flex-between flex-align-items p-b-sm m-l-md m-t-sm">
				<m-icon name="pie-chart-line" :text="$t('merchant-order-list.card-title')"></m-icon>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item>
					<text class="grid-value number" v-if="taskInfo.order_data">{{taskInfo.order_data.allWaitSub}}</text>
					<view class="grid-desc">
						<text>{{$t('work_order.task-data-1')}}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number" v-if="taskInfo.order_data">{{taskInfo.order_data.allWaitAudit}}</text>
					<view class="grid-desc">
						<text>{{$t('work_order.task-data-2')}}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number" v-if="taskInfo.order_data">{{taskInfo.order_data.allPass}}</text>
					<view class="grid-desc">
						<text>{{$t('work_order.task-data-3')}}</text>
					</view>
				</u-grid-item>
				<u-grid-item>
					<text class="grid-value number" v-if="taskInfo.order_data">{{taskInfo.order_data.allNoPass}}</text>
					<view class="grid-desc">
						<text>{{$t('work_order.task-data-4')}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<u-tabs
			:list="sortList" 
			lineWidth="20"
			lineHeight="3"
			lineColor="#ffd426"
			itemStyle="height: 40px;"
			:activeStyle="{
					fontWeight:'600',
					fontSize:'29rpx',
					color:'#232426',
				}"
		    :inactiveStyle="{
					fontSize:'29rpx',
					color:'#909193',
				}"
			:scrollable="false"
			@change="screenChange"
		></u-tabs>
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
		<view class="order-list m-md" v-if="!listLoad">
			<view class="order-item m-b-md section-bg radius-5" v-for="(item, index) in list.data" :key="index" @click="$util.go('pages/order_detail?order_id='+item.id,{path:'/merchant/'})">
				<view class="order-item_head text-sm p-md p-t-sm p-b-sm flex-between">
					<view class="flex-center">
						<text class="badge">{{ item.task_type_text }}</text>
						<text class="m-l-xs">{{ item.task_title }}</text>
					</view>
					<view class="flex-start ">
						<u-avatar :src="item.user_avatar" size="15"></u-avatar>
						<text class="text-xs u-line-1 m-l-xs">{{ item.username }}</text>
					</view>
				</view>
				<view class="flex-between p-md p-t-sm p-b-sm">
					<view class="text-sm">
						<view>
							<text>{{$t('merchant-order-list.task-item-1')}}</text>
							<text class="" :class="{'text-warning' : item.state == 2 || item.state == 5,'text-danger' : item.state == 3,'text-success' : item.state == 4}">{{ item.state_desc }}</text>
						</view>
						<view class="m-t-xs">
							<text>{{$t('merchant-order-list.task-item-2')}}</text>
							<text>{{ item.sublogs_count }}</text>
						</view>
						<view class="m-t-xs" v-if="item.last_sub_time">
							<text>{{$t('merchant-order-list.task-item-3')}}</text>
							<text>{{item.last_sub_time}}</text>
						</view>
						<view class="m-t-xs">
							<text>{{$t('merchant-order-list.task-item-4')}}</text>
							<text>{{item.create_time}}</text>
						</view>
					</view>
					<view class="order-item_btns" v-if="item.state == 2">
						<u-button size="small" shape="circle" :color="configInfo.mainColor" :style="{'color':configInfo.btbColor}" text="审核" ></u-button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
		<uni-load-more :status="status" v-if="showLoading"></uni-load-more>
		<m-modal 
			:title="operateModal.title"
			:show="operateModal.show" 
			:btn="$t('app.define-btn')" 
			@close="operateModal.show = false"
			@btnComplete="operationTask()"
		>
			<view class="p-md">
				<view class="text-sm"  v-if="operateModal.action == 1">
					<view>
						<text class="text-danger">{{ $util.handleStr($t('merchant-order-list.stop-task-1'),taskInfo.type_text) }}</text>
					</view>
					<view class="m-t-sm">
						<text class="text-xs text-warning">{{ $t('merchant-order-list.stop-task-2') }}</text>
					</view>
				</view>
				<!-- <u-parse :content="$t('work_order.stop-modal-content-1')" ></u-parse> -->
				<view class="text-sm"  v-if="operateModal.action == 2">
					<view>
						<text class="text-danger">{{ $util.handleStr($t('merchant-order-list.over-task-1'),taskInfo.type_text) }}</text>
						<!-- 结束后该{{taskInfo.type_text}}将变为<text class="text-warning m-l-xs m-r-xs">完成状态</text><text>，剩余未结算费用将退还至您的账户</text> -->
					</view>
					<view class="text-xs" style="color: #555;">
						<view class="m-t-sm">
							<text class="text-danger m-r-sm">*</text> <text>{{$util.handleStr($t('merchant-order-list.over-task-2'),taskInfo.type_text)}}</text>
						</view>
						<view class="m-t-sm ">
							<text class="text-danger m-r-sm">*</text>  <text>{{ $util.handleStr($t('merchant-order-list.over-task-3'),taskInfo.type_text) }}</text>
						</view>
						<view class="m-t-sm ">
							<text class="text-danger m-r-sm">*</text>  <text>{{ $t('merchant-order-list.over-task-4') }}</text>
						</view>
					</view>
				</view>
			</view>
		</m-modal>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	// import {Task} from '../../model/task.js'
	export default {
		data() {
			return {
				scrollTop:0,
				param: {
					page: 1,
					state: '',
					task_id:'',
					user_id:''
				},
				list: {
					data: [],
					last_page: 1,
					current_page: 1
				},
				operateModal:{
					show:false,
					action:'',
					title:''
				},
				
				taskId:'',
				current:0,
				currentError:false,
				currentTitle:'待审核',
				taskInfo:'',
				sortList: [{
					name: this.$t('work_order.tabs-1')
				},{
					name: this.$t('work_order.task-data-2'),
					state:2
				},{
					name: this.$t('work_order.task-data-3'),
					state:4
				},{
					name: this.$t('work_order.task-data-4'),
					state:3
				}],
				onScreen:{},
				orderList:[],
				pageObject:"",
				showLoading:false,
				status:"loading",
				// orderListCacheKey:'my_task_order_list',
				listLoad:true,
				listEmptyShow:false,
				pageLoading:true,
			}
		},
		
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		async onLoad(option){
			let {
				task_id
			} = option
			if(task_id){
				this.param.task_id = task_id
			}
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		async onShow(){
			await this.getTaskInfo();
		},
		
		/* 页面隐藏 */
		onHide(){
			// 关闭加载
			uni.stopPullDownRefresh();
		},
		
		// 下拉刷新
		async onPullDownRefresh(){
			await this.getTaskInfo();
			this.$util.showToast(this.$t('app.renovate.success'),function(){
				uni.stopPullDownRefresh();
			});
		},
		
		// 上滑加载
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getOrderList(this.param.page + 1);
		},
		
		methods: {
			...mapActions(['getTaskOrderList']),
			...mapMutations(['updateTaskOrderState']),
			
			init(){
				
			},
			
			// 获取任务详情
			async getTaskInfo(){
				if(!this.userInfo['uid'])return
				let {
					param
				} = this
				let data = {
					'id':param.task_id,
				}
				let res = await this.$api.task.getTaskInfo(data);
				if(res.code == 200 && res.data){
					this.taskInfo = res.data
					if(this.taskInfo.state == 3 || this.taskInfo.state == 6){
						this.current = 1;
						this.currentError = false;
					}
					if(this.taskInfo.state == 4 || this.taskInfo.state == 5){
						this.current = 1;
						this.currentError = true;
					}
				}
				this.getOrderList()
			},
			
			// 获取领取列表
			async getOrderList(page = 0){
				if(page){
					this.param.page = page
				}
				let res = await this.$api.merchant.getTaskOrderList(this.param)
				if(res.code == 200){
					let newList = res.data
					if(page > 1){
						newList.data = this.list.data.concat(newList.data) // 合并数组
					}
					this.list = newList
					this.listLoad = false
				}
			},
			
			// 筛选
			screenChange(e){
				this.listLoad = true;
				this.showLoading = false;
				this.param.state = e.state
				// this.updateTaskOrderState({
				// 	key: 'merchantParam',
				// 	val: param
				// })
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getOrderList(1);
			},
			
			clickOperateBtn(action){
				let {
					operateModal
				} = this
				let titles = {
					1: this.$t('merchant-order-list.modal-title-1'),
					2: this.$t('merchant-order-list.modal-title-2')
				}
				let data = {
					show:true,
					title:titles[action],
					action:action
				}
				this.operateModal = data
			},
			
			// 任务操作
			async operationTask(action = ''){
				this.$util.showLoading(this.$t('app.waiting'))
				let {
					param,
					operateModal
				} = this
				let data = {
					id:param.task_id,
					action:action ? action :operateModal.action
				}
				let res = await this.$api.merchant.operateTask(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.getTaskInfo()
						thos.operateModal.show = false
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:var(--theme-page-bg);
	}
	.task-step{
		background-color: #fff;
		padding-bottom: 15px;
		overflow: hidden;
		&_tips{
			text-align: center;
			padding: 10px;
			background-color: rgba(238, 88, 69, .1);
		}
		&_title{
			font-size: $contentSize;
			text-align: center;
			padding: 20px 0;
			text.title{
				position: relative;
				font-size: 30rpx;
				font-weight: bold;
				color: $incolor-1;
				margin: 0 5px;
			}
			text.title:before{
				position: absolute;
				content: '';
				width: 80%;
				height: 8px;
				background-color: rgba(255,94,0,.3);
				left: 0;
				border-radius: 25px;
				bottom: 0;
			}
		}
		&_btns{
			flex-wrap: nowrap;
			margin-top: 20px;
			// padding-top: 20px;
			// border-top: 1px solid #eee;
		}
		&__btn{
			width: 25%;
			text-align: center;
			flex-direction:column;
			align-items: center;
		}
		&__btn text{
			color: $incolor-2;
		}
		.btn-icon.stop{
			border: 1px solid rgba(245, 114, 33, .2);
			background-color: rgba(245, 114, 33, .1);
			box-shadow: 0px 2px 5px rgba(245, 114, 33, .2);
		}
		.btn-icon.start{
			border: 1px solid rgba(54, 179, 104, .2);
			background-color: rgba(54, 179, 104, .1);
			box-shadow: 0px 2px 5px rgba(54, 179, 104, .2);
		}
		.btn-icon.end{
			border: 1px solid rgba(238, 88, 69, .2);
			background-color: rgba(238, 88, 69, .1);
			box-shadow: 0px 2px 5px rgba(238, 88, 69, .2);
		}
		.btn-icon.look{
			border: 1px solid rgba(45, 140, 240, .2);
			background-color: rgba(45, 140, 240, .1);
			box-shadow: 0px 2px 5px rgba(45, 140, 240, .2);
		}
		.btn-icon{
			position: relative;
			width: 35px;
			height: 35px;
			// background-color: #fbeeec;
			border-radius: 100%;
			align-items:center;
			margin-bottom: 5px;
			box-shadow: 0px 5px 5px rgba(0, 0, 0, .1);
		}
		.btn-icon:before{
			position: absolute;
			background-color: #000;
			width: 100%;
			height: 100%;
			left: 50%;
			top: 50%;
		}
	}
	/deep/ .u-steps-item .u-text{
		justify-content:center!important
	}

	.data-list{
		background-color: #fff;
		overflow: hidden;
		// padding: 30rpx;
	}
	.order-list{
		// background-color: #fff;
		.u-tabs{
			margin-bottom: 15px;
		}
	}
	.order-item{
		color:#555;
		&_head{
			border-bottom: 1px solid var(--theme-line-four);
		}
		&_btns{
			
		}
	}
	// .order-item{
	// 	background-color: #fff;
	// 	border-radius: 10px;
	// 	position: relative;
	// 	font-size: $contentSize;
	// 	color: $incolor-2;
	// 	padding:15px 30rpx;
	// 	margin-bottom: 15px;
	// 	// border-bottom: 1px solid #f5f5f5;
	// 	&__recname{
	// 		margin: 0px 5px;
	// 		color: $incolor-1;
	// 	}
	// 	&_task{
	// 		border-left:2px solid #f3f3f3;
	// 		padding-left: 5px;
	// 		margin-top: 10rpx;
	// 		margin-left: 30px;
	// 	}

	// }
	.slot-content{
		&_item{
			margin-bottom: 5px;
			text{
				margin: 0 3px;
			}
		}
		&_item:last-child{
			margin-bottom: 0;
		}
	}
</style>
